<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Retween Configuration</title>
		<link rel="stylesheet" href="../css/config.css" />
		<link rel="shortcut icon" href="../img/system-logo32x32.png" />
	</head>
	<body>
		<div class="config-wrapper">
			<header>
				<ul id="tab-wrap">
					<li class="selected">代理设置</li>
					<li>其他设置</li>
					<div class="bg"></div>
					<div id="show-insert-window-btn" title="添加代理设置">
						<div></div>
						<div></div>
					</div>
				</ul>
			</header>
			<div class="line"></div>
			<main id="main-section">
				<div id="proxy-settings-page">
					<table>
						<thead class="header">
							<th>协议</th>
							<th>服务器IP</th>
							<th>端口</th>
							<th>操作</th>
						</thead>
						<tbody id="proxy-table-body"></tbody>
					</table>
				</div>
				<div id="others-page">
					<p class="reload-page-wrap">
						<input type="checkbox" id="reload-page" /><label
							for="reload-page"
							>更改模式时自动刷新当前页面</label
						>
					</p>
				</div>
			</main>
		</div>

		<div id="popup-wrapper" class="hide">
			<div class="popup-content">
				<form id="popup-form">
					<table>
						<tr>
							<td class="text">协议：</td>
							<td class="protocol">
								<div
									class="protocol-select"
									id="popup-select"
									data-val="http://"
								>
									HTTP
								</div>
								<div class="options"></div>
							</td>
						</tr>
						<tr>
							<td class="text">IP地址：</td>
							<td>
								<input
									type="text"
									id="ip-input"
									autocomplete="off"
								/>
							</td>
						</tr>
						<tr>
							<td class="text">端口：</td>
							<td>
								<input
									type="number"
									max="65535"
									id="port-input"
									autocomplete="off"
								/>
							</td>
						</tr>
						<tr>
							<td class="buttons" colspan="2">
								<button
									type="button"
									id="insert-and-enable-btn"
									class="enable"
								>
									新增并启用
								</button>
								<button
									type="button"
									id="insert-btn"
									class="enable"
								>
									新增
								</button>
								<button
									type="button"
									id="cancel-btn"
									class="cancel"
								>
									取消
								</button>
							</td>
						</tr>
					</table>
				</form>
			</div>
		</div>

		<script src="../js/config/header.js" type="module"></script>
		<script src="../js/config/main.js" type="module"></script>
		<script src="../js/others-config/main.js" type="module"></script>
	</body>
</html>
